<template>
  <div class="all">
     <header>
       <div class="div">
         <img src="../../../assets/返回.png" @click="back()" alt="">
         <span class="solid" @click="back()">返回</span>
       </div>
       <div class="div">
         <span  v-show="id === ''">新增项目组合</span>
         <span  v-show="id !== '' && isEdit !== 0">修改项目组合</span>
         <span  v-show="isEdit=== 0">查看项目组合</span>
       </div>
       <div class="div">
<!--         <span @click="keep()"  class="solid">保存</span>-->
       </div>
     </header>
    <div class="contentAll">
      <div >
        <div class="title fuwubaoXiangmu">
          <span><a class="hengGang"></a>项目组合</span>
          <span class="solid" @click="runAddXingmu" v-if="isEdit !== 0">
            <img style="width: 22px;height: 22px;margin-right: 5px" src="../../../assets/jia.png" alt="">
            添加项目
          </span>
          <span v-else></span>
        </div>
        <!--        <div class="label" style="position: sticky; top: 44px;background: white;">
                  <span>服务包项目</span>
                  <span class="solid" @click="runAddXingmu()"><img style="width: 22px;height: 22px;margin-right: 5px"
                                                                   src="../../../assets/jia.png" alt="">
                  添加项目
                </span>
                </div>-->
        <ul class="ulList" v-for="(item, index) in itemList" :key="index">
          <li>
            <span>{{item.item_id}} ￥{{item.amount}}</span>
            <span class="stepper" v-show="isEdit !== 0">
              <a  @click="jianjian(item, index)">-</a>
              <input :readonly="isEdit === 0 || reshelf === 1"  v-model="item.times"  @input="zhekou(item)" type="number">
              <a @click="jiajia(item)">+</a>
            </span>
            <span v-show="isEdit === 0">{{item.times}}次</span>
            <!--          <van-stepper min="0" integer @minus="jianjian(item, index)" v-model="item.times"/>-->
            <!--          v-model="value"-->
          </li>
          <li>
            <span>合计： {{allPrice(item)}}元</span>
            <span>折扣： <input type="number"
                             :readonly="isEdit === 0"
                             @keyup="item_rebateKeyup(item)"
                             v-model="item.rebate">
              折</span>
<!--                             onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"-->
          </li>
        </ul>
      </div>
      <div class="content ">
        <div class="title">
          <a class="hengGang"></a>
          <span>项目组合信息</span>
        </div>
        <div class="label">
          <span>项目组合名称：</span>
          <input style="width: 200px;" class="inputBorderNo"
                 v-model="package_name"
                 :readonly="isEdit === 0"
                 type="text" placeholder="请输入项目组合名称">
        </div>
        <div class="timeDiv">
          <p class="label" @click="[isEdit === 0 ? riqiBuyShow = false : riqiBuyShow = true]">
            <span>可购买时间：</span>
            <span>
            <input readonly class="inputBorder" v-model="buy_start_date" type="text">
            至
            <input readonly class="inputBorder" v-model="buy_end_date" type="text">
          </span>
          </p>
          <p class="label" @click="[isEdit === 0 ? riqiUseShow = false : riqiUseShow = true]">
            <span>首次使用时间：</span>
            <span>
            <input class="inputBorder" readonly v-model="use_start_date" type="text">
            至
            <input class="inputBorder" readonly v-model="use_end_date" type="text">
          </span>
          </p>
          <p class="label">
            <span>使用有效期：</span>
            <span>
            <input v-model="val_days" :readonly="isEdit === 0" placeholder="使用有效期" class="inputBorderNo" type="text" >天
          </span>
          </p>
        </div>
      </div>
      <div class="content  box">
        <div class="title">
          <a class="hengGang"></a>
          <span>价格信息</span>
        </div>
        <div class="label">
          <span>标准价格：</span>
          <span>
          <input type="number" readonly v-model="standard_amount" class="inputBorderNo" placeholder="标准价格">元
        </span>
        </div>
        <div class="label" >
          <span>价格折扣：</span>
          <span>
          <input type="number" :readonly="isEdit === 0" @keyup="keyUpPrice()"  @input="change(rebate)"  v-model="rebate" class="inputBorderNo" placeholder="价格折扣">折
        </span>
        </div>
        <div class="label" >
          <span>折扣后价格：</span>
          <span>
          <input type="number" readonly   v-model="rebate_amount" class="inputBorderNo" placeholder="折扣后价格">元
        </span>
        </div>
        <div class="label" @click="[isEdit === 0 ? buyPeoShow = false : buyPeoShow = true]">
          <span>购买人群：</span>
          <span>
          <input type="text" readonly v-model="buy_type_name" class="inputBorderNo" placeholder="购买人群">
          <img class="tan" src="../../../assets/下弹灰@2x.png" alt="">
        </span>
        </div>
        <div class="label" @click="[isEdit === 0 ? noticePeoShow = false : noticePeoShow = true]">
          <span>通知人群：</span>
          <span>
           <input type="text" readonly v-model="notice_type_name" class="inputBorderNo" placeholder="通知人群">
            <img class="tan" src="../../../assets/下弹灰@2x.png" alt="">
          </span>
        </div>
      </div>
    </div>
    <div class="bottom" v-show="isEdit !== 0">
      <button @click="keep()">保存</button>
    </div>
    <van-calendar v-model="riqiBuyShow"
                  :min-date="minDate"
                  :max-date="maxDate"
                  :value="selectBuyDate"
                  :show-confirm="false"
                  :round="false"
                  type="range"
                  color="#1da4f2"
                  @confirm="onConfirm"
                  position="right" />
    <van-calendar v-model="riqiUseShow"
                  :min-date="minDate"
                  :max-date="maxDate"
                  :value="selectUseDate"
                  :show-confirm="false"
                  :round="false"
                  type="range"
                  color="#1da4f2"
                  @confirm="UseonConfirm"
                  position="right" />
    <van-popup v-model="buyPeoShow" round position="bottom">
      <van-picker
        :default-index="buyPeoIndex"
        title="请选择购买人群"
        show-toolbar
        :columns="buyPeoColumns"
        @confirm="buyPeoOnConfirm"
        @cancel="buyPeoShow = false"
      />
    </van-popup>
    <van-popup v-model="noticePeoShow" round position="bottom">
      <van-picker
        :default-index="noticePeoIndex"
        title="请选择通知人群"
        show-toolbar
        :columns="(Number(buy_type) === 1 ? noticePeoColumns2 : noticePeoColumns1)"
        @confirm="noticePeoOnConfirm"
        @cancel="noticePeoShow = false"
      />
    </van-popup>
    <van-dialog v-model="noKeep"
                width="80%"
                confirm-button-color="#1da4f2"
                title="当前项目组合还未保存是否确认退出？"
                @confirm="noKeepConfirm()"
                @cancel="noKeepCancel()"
                show-cancel-button>
    </van-dialog>
  </div>
</template>

<script>
import {Toast} from 'vant'
import $ from 'jquery'
export default {
  name: 'SaveServicePack',
  data () {
    return {
      team_id: this.$route.query.team_id,
      package_name: '', // 服务包名称
      buy_start_date: '', // 购买有效期开始日期
      buy_end_date: '', // 购买有效期结束日期
      use_start_date: '', // 使用有效期开始时间
      use_end_date: '', // 使用有效期结束时间
      val_days: '', // 有效日期
      standard_amount: '', // 标准价格
      rebate: 10, // 折扣
      rebate_amount: '', // 折后价格
      itemList: [],
      //       {
      //   'doc_amount_id': '1', // 医生项目价格ID
      //   'times': '1', // 次数
      //   'amount': '1' // 项目金额
      // }
      id: this.$route.query.id, // 修改传值  新增传空或者”“"
      minDate: new Date(),
      maxDate: new Date(2030, 0, 1),
      selectBuyDate: '',
      riqiBuyShow: false,
      riqiUseShow: false,
      selectUseDate: '',
      isEdit: Number(this.$route.query.isEdit),
      buy_type_name: '',
      buy_type: '', // '购买人群 1:档案管理人员;2:全部患者',
      notice_type_name: '',
      notice_type: '', // '通知人群 1:档案管理人员;2:全部患者',
      buyPeoShow: false,
      buyPeoIndex: 0,
      buyPeoColumns: [
        {
          text: '档案管理人员',
          id: 1
        },
        {
          text: '全部患者',
          id: 2
        }
      ],
      noticePeoShow: false,
      noticePeoIndex: 0,
      noticePeoColumns1: [
        {
          text: '档案管理人员',
          id: 1
        },
        {
          text: '全部患者',
          id: 2
        }
      ],
      noticePeoColumns2: [
        {
          text: '档案管理人员',
          id: 1
        }
      ],
      reshelf: Number(this.$route.query.reshelf),
      isKeep: true,
      noKeep: false
    }
  },
  computed: {
    allPrice () {
      return function (item) {
        let price = 0
        if (item.rebate) {
          price = Number(item.amount) * (Number(item.rebate) / 10) * Number(item.times)
        } else {
          price = Number(item.amount) * Number(item.times)
        }
        return price
      }
    },
    item_rebateKeyup () {
      return function (item) {
        if (Number(item.rebate) <= 0) {
          item.rebate = ''
        } else if (Number(item.rebate) > 10) {
          item.rebate = 10
        }
        this.getJiage()
      }
    }
  },
  mounted () {
    if (this.reshelf === 1) {
      $('.contentAll').css({height: $(window).height() - 50 - 44 - 64 + 'px'})
    } else {
      $('.contentAll').css({height: $(window).height() - 50 - 44 + 'px'})
    }
    if (this.id === undefined) {
      this.id = ''
      document.title = '新增项目组合'
    } else {
      document.title = '修改项目组合'
      // window.title = '修改项目组合'
    }
    if (sessionStorage.getItem('servicePackData') !== null) {
      var data = JSON.parse(sessionStorage.getItem('servicePackData'))
      this.package_name = data.package_name // 服务包名称
      this.buy_start_date = data.buy_start_date // 购买有效期开始日期
      this.buy_end_date = data.buy_end_date // 购买有效期结束日期
      this.use_start_date = data.use_start_date // 使用有效期开始时间
      this.use_end_date = data.use_end_date // 使用有效期结束时间
      this.val_days = data.val_days // 有效日期
      this.standard_amount = data.standard_amount // 标准价格
      this.rebate = data.rebate // 折扣
      this.rebate_amount = data.rebate_amount // 折后价格
      this.itemList = data.itemList
      this.id = data.id
      this.buy_type_name = data.buy_type_name
      this.buy_type = data.buy_type
      this.notice_type_name = data.notice_type_name
      this.notice_type = data.notice_type
      this.buyPeoIndex = data.buyPeoIndex
      this.noticePeoIndex = data.noticePeoIndex
    } else if (this.id !== undefined && this.id !== null && this.id !== '') {
      if (this.reshelf === 1) {
        // 重新上架的 历史记录
        this.getShangjiaHis()
      } else {
        this.getHisData()
      }
    }

    this.getJiage()
  },
  methods: {
    // 通知购买人群
    noticePeoOnConfirm (value, index) {
      this.notice_type_name = value.text
      this.notice_type = value.id
      this.noticePeoShow = false
    },
    // 确认购买人群
    buyPeoOnConfirm (value, index) {
      this.buy_type_name = value.text
      this.buy_type = value.id
      if (Number(this.buy_type) === 1 && Number(this.notice_type === 2)) {
        this.notice_type_name = ''
        this.notice_type = ''
      }
      this.buyPeoShow = false
    },
    // 获取价格
    getJiage () {
      if (this.itemList.length > 0) {
        this.standard_amount = 0
        this.itemList.forEach((curr, index) => {
          this.standard_amount += Number(curr.amount) * Number(curr.times) * (Number(curr.rebate) / 10)
        })
        // for (var i in this.itemList) {
        //   // this.standard_amount += this.itemList[i].amount * this.itemList[i].times
        // }
        this.standard_amount = this.standard_amount.toFixed(2)
        this.keyUpPrice()
      }
    },
    zhekou (item) {
      if (Number(item.times) <= 0) {
        item.times = 1
      }
      item.times = Math.round(item.times)
      this.getJiage()
      this.keyUpPrice()
    },
    change (e) {
      if (Number(e) > 10) {
        this.rebate = 10
        return false
      }
      // 通过正则过滤小数点后一位
      this.rebate = (e.match(/^\d*(\.?\d{0,1})/g)[0]) || null
    },
    // 查看详情 重新上架查看的
    getShangjiaHis () {
      this.$http.findChongPackage({id: this.id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.package_name = res.data.data.package_name // 服务包名称
            this.buy_start_date = res.data.data.buy_start_date // 购买有效期开始日期
            this.buy_end_date = res.data.data.buy_end_date // 购买有效期结束日期
            this.use_start_date = res.data.data.use_start_date // 使用有效期开始时间
            this.use_end_date = res.data.data.use_end_date // 使用有效期结束时间
            this.val_days = res.data.data.val_days // 有效日期
            this.standard_amount = res.data.data.standard_amount // 标准价格
            this.rebate = res.data.data.rebate // 折扣
            this.rebate_amount = res.data.data.rebate_amount // 折后价格
            this.itemList = res.data.data.itemList

            this.buy_type = res.data.data.buy_type
            this.notice_type = res.data.data.notice_type
            for (var i in this.buyPeoColumns) {
              if (this.buyPeoColumns[i].id == this.buy_type) {
                this.buy_type_name = this.buyPeoColumns[i].text
                this.buyPeoIndex = i
                break
              }
            }

            for (let k in this.noticePeoColumns1) {
              if (this.noticePeoColumns1[k].id == this.notice_type) {
                this.notice_type_name = this.noticePeoColumns1[k].text
                console.log(this.notice_type_name)
                this.noticePeoIndex = k
                break
              }
            }
            // this.buy_type_name = data.buy_type_name
            // this.buy_type = data.buy_type
            // this.notice_type_name = data.notice_type_name
            // this.notice_type = data.notice_type
            // this.buyPeoIndex = data.buyPeoIndex
            // this.noticePeoIndex = data.noticePeoIndex
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 查看详情
    getHisData () {
      this.$http.findOnePackage({id: this.id, team_id: this.team_id ? this.team_id : null})
        .then(res => {
          console.log('详情', res)
          if (res.data.status === 'success') {
            this.package_name = res.data.data.package_name // 服务包名称
            this.buy_start_date = res.data.data.buy_start_date // 购买有效期开始日期
            this.buy_end_date = res.data.data.buy_end_date // 购买有效期结束日期
            this.use_start_date = res.data.data.use_start_date // 使用有效期开始时间
            this.use_end_date = res.data.data.use_end_date // 使用有效期结束时间
            this.val_days = res.data.data.val_days // 有效日期
            this.standard_amount = res.data.data.standard_amount // 标准价格
            this.rebate = res.data.data.rebate // 折扣
            this.rebate_amount = res.data.data.rebate_amount // 折后价格
            this.itemList = res.data.data.itemList
            // this.itemList = sessionStorage.getItem('itemListSelect') === null ? res.data.data.itemList : JSON.parse(sessionStorage.getItem('itemListSelect'))

            this.buy_type = res.data.data.buy_type
            this.notice_type = res.data.data.notice_type
            for (var i in this.buyPeoColumns) {
              if (this.buyPeoColumns[i].id == this.buy_type) {
                this.buy_type_name = this.buyPeoColumns[i].text
                this.buyPeoIndex = i
                break
              }
            }

            for (let k in this.noticePeoColumns1) {
              if (this.noticePeoColumns1[k].id == this.notice_type) {
                this.notice_type_name = this.noticePeoColumns1[k].text
                console.log(this.notice_type_name)
                this.noticePeoIndex = k
                break
              }
            }
            // this.buy_type_name = data.buy_type_name
            // this.buy_type = data.buy_type
            // this.notice_type_name = data.notice_type_name
            // this.notice_type = data.notice_type
            // this.buyPeoIndex = data.buyPeoIndex
            // this.noticePeoIndex = data.noticePeoIndex
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 输入价格
    keyUpPrice () {
      if (Number(this.standard_amount) > 0 && Number(this.rebate) > 0) {
        this.rebate_amount = (Number(this.standard_amount) * (Number(this.rebate) / 10)).toFixed(2)
      } else {
        this.rebate_amount = ''
      }
    },
    // 日期转换
    formatDate (date) {
      // eslint-disable-next-line no-redeclare
      var date = new Date(date)
      var YY = date.getFullYear() + '-'
      var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
      // var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      // var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
      // var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
      return YY + MM + DD
    },
    // 点击计步器减
    jianjian (item, index) {
      if (this.isEdit === 0 || this.reshelf === 1) {
      } else {
        item.times--
        this.getJiage()
        this.keyUpPrice()
        if (Number(item.times) <= 0) {
          this.itemList.splice(index, 1)
          return false
        }
      }
    },
    jiajia (item) {
      if (this.isEdit === 0 || this.reshelf === 1) {
      } else {
        item.times++
        this.getJiage()
        this.keyUpPrice()
      }
    },
    // 点击选择日期
    onConfirm (date) {
      const [start, end] = date
      this.riqiBuyShow = false
      this.selectBuyDate = `${this.formatDate(start)} - ${this.formatDate(end)}`
      this.buy_start_date = this.formatDate(start)
      this.buy_end_date = this.formatDate(end)
    },
    // 点击选择日期
    UseonConfirm (date) {
      const [start, end] = date
      this.riqiUseShow = false
      this.selectUseDate = `${this.formatDate(start)} - ${this.formatDate(end)}`
      this.use_start_date = this.formatDate(start)
      this.use_end_date = this.formatDate(end)
    },
    // 新增和修改
    keep () {
      if (this.itemList.length <= 0) {
        Toast('请添加服务项目')
        return false
      }
      let istrue = true
      this.itemList.forEach((curr, index) => {
        if (!curr.rebate) {
          istrue = false
          return false
        }
      })
      if (istrue === false) {
        this.$toast('请输入项目组合折扣')
        return false
      }
      if (!this.package_name) {
        Toast('请输入项目组合名称')
        return false
      }
      if (!this.buy_start_date || !this.buy_end_date) {
        Toast('请选择可购买时间')
        return false
      }
      if (
        (!this.use_start_date) ||
        (!this.use_end_date)
      ) {
        Toast('请选择首次使用时间')
        return false
      }
      if (this.buy_start_date > this.use_start_date) {
        this.$toast('使用时间的开始时间不得小于可购买时间的开始时间')
        return false
      }
      if (this.buy_end_date > this.use_end_date) {
        this.$toast('使用时间的结束时间不得小于可购买时间的结束时间')
        return false
      }
      if (!this.val_days) {
        Toast('请输入有效期')
        return false
      }
      if (this.standard_amount === '' && this.standard_amount === undefined && this.standard_amount === null) {
        Toast('请添加服务项目')
        return false
      }
      if (!this.rebate) {
        Toast('请输入价格折扣')
        return false
      }
      // if (this.buy_type === '' && this.buy_type === undefined && this.buy_type === null) {
      //   Toast('请选择购买人群')
      //   return false
      // }
      // if (this.notice_type === '' && this.notice_type === undefined && this.notice_type === null) {
      //   Toast('请选择通知人群')
      //   return false
      // }

      if (this.isKeep === false) {
        Toast('请勿重复保存')
        return false
      }
      this.insertData()
    },
    // 保存
    insertData () {
      this.isKeep = false
      // this.reshelf 1是重新上架
      var del_tag
      del_tag = 2
      if (this.reshelf === 1) {
        this.id = ''
        del_tag = 0
        // del_tag字段正常新增的时候传2 为暂存状态   重新上架的时候传0
      }
      console.log(this.team_id)
      this.$http.insertPackage({
        team_id: this.team_id ? this.team_id : null, // 追加团队id
        package_name: this.package_name, // 服务包名称
        buy_start_date: this.buy_start_date, // 购买有效期开始日期
        buy_end_date: this.buy_end_date, // 购买有效期结束日期
        use_start_date: this.use_start_date, // 使用有效期开始时间
        use_end_date: this.use_end_date, // 使用有效期结束时间
        val_days: this.val_days, // 有效日期
        standard_amount: this.standard_amount, // 标准价格
        rebate: this.rebate, // 折扣
        rebate_amount: this.rebate_amount, // 折后价格
        itemList: this.itemList,
        id: this.id,
        buy_type: this.buy_type,
        notice_type: this.notice_type,
        del_tag: del_tag
      })
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.$router.history.go(-1)
            this.isKeep = true
            sessionStorage.removeItem('servicePackData')
            sessionStorage.removeItem('itemListSelect')
            if (this.id === '') {
              Toast('保存成功')
            } else {
              Toast('修改成功')
            }
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    runAddXingmu () {
      if (this.isEdit === 0 || this.reshelf === 1) {
      } else {
        var obj = {
          package_name: this.package_name, // 服务包名称
          buy_start_date: this.buy_start_date, // 购买有效期开始日期
          buy_end_date: this.buy_end_date, // 购买有效期结束日期
          use_start_date: this.use_start_date, // 使用有效期开始时间
          use_end_date: this.use_end_date, // 使用有效期结束时间
          val_days: this.val_days, // 有效日期
          standard_amount: this.standard_amount, // 标准价格
          rebate: this.rebate, // 折扣
          rebate_amount: this.rebate_amount, // 折后价格
          itemList: this.itemList,
          id: this.id,
          buy_type_name: this.buy_type_name,
          buy_type: this.buy_type,
          notice_type_name: this.notice_type_name,
          notice_type: this.notice_type,
          buyPeoIndex: this.buyPeoIndex,
          noticePeoIndex: this.noticePeoIndex
        }
        sessionStorage.setItem('servicePackData', JSON.stringify(obj))
        // this.$router.push({path: '/priceList', query: {select: true}})
        this.$router.push({path: '/myPriceList', query: {team_id: this.team_id}}) // 重新跳转至独立页面
      }
    },
    // 返回
    back () {
      if (this.isEdit !== 0) {
        this.noKeep = true
        return false
      }
      this.$router.history.go(-1)
    },
    noKeepCancel () {
      this.noKeep = false
    },
    noKeepConfirm () {
      this.$router.history.go(-1)
    }
  },
  destroyed () {
    // var obj = {
    //   package_name: this.package_name, // 服务包名称
    //   buy_start_date: this.buy_start_date, // 购买有效期开始日期
    //   buy_end_date: this.buy_end_date, // 购买有效期结束日期
    //   use_start_date: this.use_start_date, // 使用有效期开始时间
    //   use_end_date: this.use_end_date, // 使用有效期结束时间
    //   val_days: this.val_days, // 有效日期
    //   standard_amount: this.standard_amount, // 标准价格
    //   rebate: this.rebate, // 折扣
    //   rebate_amount: this.rebate_amount, // 折后价格
    //   itemList: this.itemList,
    //   id: this.id,
    //   buy_type_name: this.buy_type_name,
    //   buy_type: this.buy_type,
    //   notice_type_name: this.notice_type_name,
    //   notice_type: this.notice_type,
    //   buyPeoIndex: this.buyPeoIndex,
    //   noticePeoIndex: this.noticePeoIndex
    // }
    // sessionStorage.setItem('servicePackData', JSON.stringify(obj))
    // sessionStorage.removeItem('servicePackData') // 你上面做了跳转存储数据，偏偏这里还删掉了，没有意义，我把这个禁掉了 -刘钢
  }
}
</script>

<style scoped>
  .all{
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #FAF9FE;
  }
  header{
     width: 100%;
     height: 44px;
     display: flex;
     align-items: center;
     border-bottom: 1px solid #E5E5E5;
     background: white;
     position: sticky;
     top: 0;
     z-index: 9;
   }
   .div{
     width: 33%;
     height: 100%;
     display: flex;
     align-items: center;
     font-family: "PingFang SC";
     font-size: 15px;
     font-weight: bold;
   }
   .div img{
     margin-right: 5px;
   }
   .div:nth-child(1) img{
     height: 13px;
     width: 7px;
     margin-left: 15px;
   }
   .div:nth-child(3) img{
     width: 15px;
     height: 15px;
     margin-right: 5px;
   }
   .div:nth-child(3) span{
     margin-right: 15px;
   }
   .div:nth-child(2){
     justify-content: center;
   }
   .div:nth-child(3){
     justify-content: flex-end;
   }
   .solid{
     color: #1DA4F2;
   }
   .contentAll{
     overflow: auto;
   }
   .content{
     background: white;
     margin-bottom: 10px;
   }
   .box{
     padding-bottom: 10px;
     box-sizing: border-box;
     margin-bottom: 70px !important;
   }
   .timeDiv .label{
     border-bottom: none;
   }
   .timeDiv{
     border-bottom: 1px solid #E5E5E5;
   }
  .label{
    width: 95%;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
    font-weight: 500;
    font-family: "PingFang SC";
    border-bottom: 1px solid #E5E5E5;
    margin: 0 auto;
  }
  .label  input{
    width: 100px;
  }
  .label span{
    display: flex;
    align-items: center;
  }
  .inputBorder{
    width: 100px;
    height: 29px;
    border: 1px solid #1DA4F2;
    border-radius: 4px;
    margin-left: 5px;
    margin-right: 5px;
    text-align: center;
    font-size: 15px;
  }
  .inputBorderNo{
    border: none;
    text-align: right;
    margin-right: 8px;
  }
  .ulList{
    width: 100%;
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-bottom: 8px;
    background: #FFFFFF;
    padding: 10px 10px 0 10px;
    box-sizing: border-box;
  }
  .ulList li:first-child{
    padding: 8px 10px;
    background: #FAF9FE;
    border-radius: 10px;
  }
  .ulList li:last-child{
    padding: 0 10px;
    line-height: 50px;
  }
  .ulList li:last-child input{
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    text-align: right;
    border: none;
    color: #1da4f2;
  }
  .ulList li{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
  }
  .stepper{
    width: 108px;
    height: 25px;
    border: 1px solid #1da4f2;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-radius: 4px;
  }
  .stepper a{
    width: 30%;
    height: 100%;
    color: #1DA4F2;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
  .stepper input{
    width: 40%;
    height: 100%;
    font-size: 15px;
    border-left: 1px solid #1da4f2;
    border-right: 1px solid #1da4f2;
    border-top: none;
    border-bottom: none;
    background: transparent;
    text-align: center;
  }
  /deep/ .van-stepper__minus--disabled,
  /deep/ .van-stepper__plus--disabled,
  /deep/ .van-stepper__minus,
  /deep/ .van-stepper__plus{
    border: 1px solid #1da4f2;
    color: #1da4f2;
  }
  /deep/ .van-stepper__input{
    margin: 0 auto;
    border-top: 1px solid #1da4f2;
    border-bottom: 1px solid #1da4f2;
  }
  .bottom{
    width: 100%;
    /*position: fixed;*/
    /*bottom: 50px;*/
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    padding: 10px 0;
    box-sizing: border-box;
  }
  .bottom button{
    width: 95%;
    height: 44px;
    border-radius: 20px;
    background: linear-gradient(90deg, #1DA3F2 0%, #1DC7F2 100%);
    border: none;
    color: white;
  }
  .tan{
    width: 13px;
    height: 7px;
  }

  .title{
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
    background: #ffffff;
  }
  .hengGang{
    display: block;
    width: 2px;
    border-radius: 1px;
    height: 15px;
    background: #1DA4F2;
    margin: 0 5px 0 10px;
  }
  .fuwubaoXiangmu{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 10px;
    box-sizing: border-box;
  }
  .fuwubaoXiangmu span{
    display: flex;
    align-items: center;
  }
</style>
